<template lang="">
  <div>
    <el-dialog :title="showTitle" :visible.sync="value" :close-on-click-modal="false" :close-on-press-escape="false"
      :show-close="false">
      <el-form ref="depform" :rules="fromRules" :model="departmentFrom" :label-width="formLabelWidth">
        <el-form-item prop="name" label="部门名称">
          <el-input v-model="departmentFrom.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="code" label="部门编码">
          <el-input v-model="departmentFrom.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="manager" label="部门负责人">
          <el-select @focus="getCharge" v-model="departmentFrom.manager" placeholder="请选择">
            <el-option v-for="employees in EmployeesList" :label="employees.username" :key="employees.id"
              :value="employees.username"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="introduce" label="部门介绍">
          <el-input type="textarea" v-model="departmentFrom.introduce" :rows="3" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="shutDown">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getDepartmentListAPI, getEmployeesListAPI, addDepartmentAPI, getDepartmentsAPI, updateDepartmentAPI } from '@/api'
  export default {
    name: 'DeparmentFrom',
    props: {
      value: {
        type: Boolean,
        required: true,
        default: false
      },
      dopartment: {
        type: Object
      },
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data () {
      /* 校验部门名称 */
      const checkNameRepeat = async (rule, value, callback) => {
        const { depts } = await getDepartmentListAPI()
        let results = false
        if (this.isEdit) {
          // 编辑状态
          results = depts.filter(item => {
            return item.id !== this.dopartment.id && item.pid === this.dopartment.pid
          }).some(item => {
            return item.name === value
          })
        } else {
          results = depts.filter(item => { return item.pid === this.dopartment.id }).some(item => {
            return item.name === value
          })
        }
        console.log(results);
        results ? callback(new Error('部门名称不能重复')) : callback()
      }
      const checkCodeRepeat = async (rule, value, callback) => {
        const { depts } = await getDepartmentListAPI()
        let results = false
        if (this.isEdit) {
          // 编辑状态
          results = depts.filter(item => { return item.id !== this.dopartment.id }).some(item => {
            item.code == value
          })
        } else {
          // 新增状态
          results = depts.some(item => { return item.code === value })
        }
        results ? callback(new Error('部门编码不能重复')) : callback()
      }
      return {
        departmentFrom: {
          name: '',
          code: '',
          manager: '',
          introduce: ''
        },
        fromRules: {
          name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 30, message: '内容应在1-30个字符之间', trigger: 'blur' },
          { validator: checkNameRepeat, trigger: 'blur' }],
          code: [{ required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 30, message: '内容应在1-30个字符之间', trigger: 'blur' },
          { validator: checkCodeRepeat, trigger: 'blur' }
          ],
          manager: [{ required: true, message: '部门编码不能为空', trigger: 'blur' }],
          introduce: [{ required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '内容应在1-30个字符之间', trigger: 'blur' }
          ],
        },
        formLabelWidth: '120px',
        EmployeesList: []
      }
    },
    computed: {
      showTitle () {
        return this.isEdit ? '编辑部门' : '新增子部门'
      }
    },
    methods: {
      shutDown () {
        this.$emit('input')
      },
      async getDepartments (id) {
        const res = await getDepartmentsAPI(id)
        this.departmentFrom = { ...res }
      },

      async confirm () {
        // 校验全表单
        this.$refs.depform.validate(async is_Ok => {
          if (is_Ok) {
            if (this.departmentFrom.id) {
              // 说明是要修改数据
              await updateDepartmentAPI(this.departmentFrom.id, this.departmentFrom)
              this.$message.success('修改成功')
            } else {
              // 说明要新增数据
              const departmentData = { ...this.departmentFrom, pid: this.dopartment.id }
              await addDepartmentAPI(departmentData)
              this.$message.success('添加成功')
            }

            this.$emit('addpartment')
            this.$emit('input')
          }
        })

      },
      async getCharge () {
        this.EmployeesList = await getEmployeesListAPI()
      }
    },
  }
</script>
<style lang="">

</style>